{% extends "base.html" %}

{% block meta %}
    <meta name="menu-tag" content="31"/>
{% end block %}

{% block main %}
<div class="container">
    <ol class="breadcrumb">
        <li class="active">所有课程</li>
    </ol>
    <div class="row container">
        <button class="btn btn-primary" data-bind="click:$root.newCourse">添加新课程</button>
    </div>
    <h4 class="text text-success">已上架课程：</h4>
    <hr />
    <div id="courselist" class="container" data-bind="foreach:enabledCourses">
        <div class="col-md-3">
            <div class="panel panel-success">
                <div class="panel-heading">
                    <button type="button" class="btn btn-sm btn-primary" data-bind="click:$root.editCourse">
                        <i class="glyphicon glyphicon-edit"></i>编辑
                    </button>
                    <a class="btn btn-sm btn-primary" data-bind="attr:{href:'/lab_course/' + courseid}">
                        <i class="glyphicon glyphicon-list"></i>查看章节
                    </a>
                </div>
                <div class="panel-body" style="height: 130px">
                    <h4><b data-bind="text:coursename"></b></h4>
                    <div>
                        课程编号：<b data-bind="text:code"></b>
                    </div>
                    <div>
                        容器镜像：<b data-bind="text:courseimagename"></b>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <h4 class="text text-info">未上架课程：</h4>
    <hr />
    <div id="courselist" class="container" data-bind="foreach:disabledCourses">
        <div class="col-md-3">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <button type="button" class="btn btn-sm btn-primary" data-bind="click:$root.editCourse">
                        <i class="glyphicon glyphicon-edit"></i>编辑
                    </button>
                    <a class="btn btn-sm btn-primary" data-bind="attr:{href:'/lab_course/' + courseid}">
                        <i class="glyphicon glyphicon-list"></i>查看章节
                    </a>
                    <button type="button" class="btn btn-sm btn-danger" data-bind="click:$root.deleteCourse">
                        <i class="glyphicon glyphicon-trash"></i>删除
                    </button>
                </div>
                <div class="panel-body" style="height: 130px">
                    <h4><b data-bind="text:coursename"></b></h4>
                    <div>
                        课程编号：<b data-bind="text:code"></b>
                    </div>
                    <div>
                        容器镜像：<b data-bind="text:courseimagename"></b>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 对话框开始 -->
<div id="dlg" class="modal fade" data-bind="with:selectedCourse">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">课程信息</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="coursename" class="control-label col-md-2">名称</label>
                        <div class="col-md-10">
                            <input type="text" id="coursename" class="form-control" data-bind="value:coursename" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="code" class="control-label col-md-2">编号</label>
                        <div class="col-md-10">
                            <input type="text" id="code" class="form-control" data-bind="value:code" readonly/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="code" class="control-label col-md-2">镜像</label>
                        <div class="col-md-10">
                            <select id="containerimage" class="form-control" 
                                data-bind="options:$root.images, optionsText:'imagename', optionsValue:'imageid', 
                                    value:courseimageid, optionsCaption:'选择一个镜像'">
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="code" class="control-label col-md-2">状态</label>
                        <div class="col-md-10">
                            <label class="radio-inline">
								<input type="radio" name="status" value="1" data-bind="checked:status"/>上架
							</label>
							<label class="radio-inline">
								<input type="radio" name="status" value="0" data-bind="checked:status"/>下架
							</label>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-offset-2">
                            <button type="button" class="btn btn-default" data-bind="click:$root.updateCourse">更新</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- 对话框结束 -->

{% end block %}


{% block script %}
<script type="text/javascript">
    function Course(courseid, coursename, code, courseimageid, courseimagename, status){
        var self = this;
        self.courseid = courseid ? courseid : 0;
        self.coursename = coursename;
        self.code = code;
        self.courseimageid = courseimageid;
        self.courseimagename = courseimagename;
        self.status = status ? status.toString() : '0';
    }

    function Image(imageid, imagename){
        var self = this;
        self.imageid = imageid;
        self.imagename = imagename;
        self.shortname = ko.computed(function(){
            var index = self.imagename.lastIndexOf('/');
            return self.imagename.substr(index+1);
        });
    }

    function ModelView(){
        var self = this;
        self.enabledCourses = ko.observableArray();
        self.disabledCourses = ko.observableArray();
        self.selectedCourse = ko.observable();
        self.images = ko.observableArray();

        self.viewCourseDetails = function(){
            window.location.href = '/lab_coursedetails?id=' + this.courseid;
        };

        self.newCourse = function(){
            self.selectedCourse(new Course());
            $("#dlg").modal({ 'backdrop': 'static' });
        }

        self.editCourse = function(){
            self.selectedCourse(this);
            $("#dlg").modal({ 'backdrop': 'static' });
        };

        self.deleteCourse = function(){
            courseid = this.courseid;
            coursename = this.coursename;
            bootbox.confirm('确定要删除课程【' + coursename + '】吗？该课程下所有的章节都将被删除', function(choice){
                if(choice){
                   $.ajax({
                    url :  '/lab_deletecourse?id=' + courseid,
                    type : 'delete',
                    dataType: 'json',
                    success : function(result){
                        if(result.code == 'success'){
                            bootbox.alert('删除成功！', function(){
                                $("#dlg").modal('hide');
                                load_data();
                            })
                        } else{
                            bootbox.alert(result.message);
                        }
                    }
                   });
                }
            });
        };

        self.updateCourse = function(){
            var obj = this;
            if (!obj.coursename || !obj.courseimageid){
                bootbox.alert('请填充所有字段！');
                return;
            }

            var course = {
                courseid : obj.courseid,
                coursename : obj.coursename,
                courseimageid : obj.courseimageid,
                status : obj.status
            };
            url = obj.courseid != 0 ? '/lab_editcourse' : '/lab_newcourse';
            type = obj.courseid != 0 ? 'put' : 'post';
            $.ajax({
                url :  url,
                type : type,
                data : JSON.stringify(course),
                dataType: 'json',
                success : function(result){
                    if(result.code == 'success'){
                        bootbox.alert('操作成功！', function(){
                            $("#dlg").modal('hide');
                            load_data();
                        })
                    } else{
                        bootbox.alert(result.message);
                    }
                }
            })
        }
    }		

    function load_data(chapterid){
        $.getJSON("/lab_getcourselist", function(data){
            var enabledCourses = [];
            var disabledCourses = [];
            for(var i=0;i<data.length;i++){
                var item = data[i];
                course = new Course(item.courseid, item.coursename, item.code, item.imageid, item.imagename, item.status);
                if(item.status == 1){
                    enabledCourses.push(course);
                } else{
                    disabledCourses.push(course);
                }
            }

            modelView.enabledCourses(enabledCourses);
            modelView.disabledCourses(disabledCourses);
        });

        var querydata = {
            'operation' : 'get_images_from_db',
            'operand' : {
                'status' : 1
            }
        }
        $.ajax({
            url : "/docker_images",
            type : "post",
            data : JSON.stringify(querydata),
            dataType : 'json',
            success : function(jsonResult){
                var images = [];
                for(var i=0;i<jsonResult.data.length;i++){
                    var item = jsonResult.data[i];
                    images.push(new Image(item.imageid, item.imagename));
                }

                modelView.images(images);
            }
        });
    }

    var modelView = new ModelView();
    ko.applyBindings(modelView);

    $(document).ready(function(){
        load_data()
    });
</script>
{% end block %}
